<template>
  FormItem-props.label：
  <wanglei-form-item label="姓名：">
    <wanglei-input v-model="name" placeholder="请输入姓名"></wanglei-input>
  </wanglei-form-item>

  FormItem-slots.label:
  <wanglei-form-item label="姓名：">
    <template #label><b>你的姓名</b></template>
    <wanglei-input v-model="name" placeholder="请输入姓名"></wanglei-input>
  </wanglei-form-item>

  FormItem-validate:
  <wanglei-form-item label="姓名：" prop="name" :rules="nameRules">
    <wanglei-input v-model="name" placeholder="请输入姓名"></wanglei-input>
  </wanglei-form-item>
  <wanglei-form-item label="密码：" prop="password">
    <wanglei-input v-model="password" type="password" placeholder="请输入姓名"></wanglei-input>
  </wanglei-form-item>

  Form-validate:
  <wanglei-form :model="formValues" :rules="formRules" label-width="100px" ref="formRef" labelPosition="top">
    <wanglei-form-item label="姓名" prop="name">
      <wanglei-input v-model="formValues.name" placeholder="请输入姓名"></wanglei-input>
    </wanglei-form-item>
    <wanglei-form-item label="密码" prop="password">
      <wanglei-input v-model="formValues.password" type="password" placeholder="请输入密码"></wanglei-input>
    </wanglei-form-item>
    <wanglei-form-item>
      <wanglei-button type="primary" @click="submit">提交</wanglei-button>
    </wanglei-form-item>
  </wanglei-form>

</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const name = ref('张三李四王五赵六')
    const password = ref('')
    const nameRules = ref([
      { required: true, message: '姓名是必填项' },
      { max: 6, message: '不能超过6位', trigger: 'blur' }
    ]);

    const formValues = reactive({
      name: '',
      password: ''
    })
    const formRules = reactive({
      name: [
        { required: true, message: '姓名必填' },
        { max: 6, message: '姓名不能超过6位', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { min: 8, message: '密码最少8位', trigger: 'blur' }
      ]
    })

    const formRef = ref()
    const submit = () => {
      formRef.value.validate((valid: boolean) => {
        console.log("is valid", valid);
      })
    }
    return {
      name,
      password,
      nameRules,
      formValues,
      formRules,
      submit,
      formRef
    }
  }
})
</script>
